<template>
  <div class="home_left">
    <p
      v-for="(v, i) in lists"
      :key="i"
      @click="btnLclick(i)"
      :class="{ active: index === i }"
    >
      {{ v.title }}
    </p>
  </div>
</template>

<script>
import bus from "../utils/util";
export default {
  data() {
    return {
      index: 0,
    };
  },
  props: {
    lists: {
      type: Array, // 类型
      required: true, // 是否必须
      default: () => {
        // 返回值
        return [];
      },
    },
  },
  computed: {},

  methods: {
    btnLclick(i) {
      bus.$emit("index", i);
    },
  },
  mounted() {
    bus.$on("itwo", (value) => {
      this.index = value;
    });
  },
};
</script>

<style lang="scss" scoped>
.home_left {
  width: 30%;
  height: 100%;
  background: rgb(240, 240, 240);
  p {
    line-height: 30px;
    text-align: center;
  }
  .active {
    background: #fff;
    color: skyblue;
  }
}
</style>
